<template>
  <div class="mine_box">
    <div class="msg">
      <img :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `http://124.220.76.151:8000${userInfo.avatarl}`" alt="" />
      <div>{{ userInfo.username || userInfo.name }}</div>
      <el-button type="primary" @click="loginOut">退出登录</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick" class="form">
      <el-tab-pane label="我的信息" name="first">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="http://124.220.76.151:8000/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              accept="image/png, image/jpeg"
            >
              <img
                v-if="form.avatar"
                :src="form.avatar.indexOf('http') != -1 ? form.avatar : `http://124.220.76.151:8000${form.avatarl}`"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.telephone" type="number"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="我的订单" name="second">
        <el-table
          :data="tableData"
          class="shopTable"
          empty-text="暂无购买记录，快去选购吧"
          height="60vh"
        >
          <el-table-column label="商品图" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="table_img">
                <img :src="scope.row.flowerDto.imageUrl" alt="" />
                <p>{{ scope.row.flowerDto.name }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <p>{{ scope.row.flowerDto.name }}</p>
            </template>
          </el-table-column>
          <el-table-column label="订购价(￥)" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.salesPrice }}
            </template>
          </el-table-column>
          <el-table-column label="数量" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.size }}
              <!-- <el-input-number
                v-model="scope.row.num"
                :min="1"
                :max="999999"
                step-strictly
                label="请输入"
              ></el-input-number> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background :current-page.sync="current" :page-size="8" layout="prev, pager, next" :total="total" @current-change="currentChange">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { userUpdate } from "@/api/info";
import { getOrderList } from "@/api/order";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        gender: "",
        avatar: "",
      },
      userInfo: {
        id: 0,
        username: "admin",
        password: "string",
        gender: 0,
        avatar:
          "https://upyun.dinghuale.com/uploads/20201208/202012081501255872.jpg",
        status: 0,
        type: 0,
      },
      tableData: [],
      activeName: "first",
      total: 0,
      current: 1
    };
  },
  created() {
    this.$store.dispatch("user/getInfo").then(res=>{
      this.userInfo = res
      this.form = JSON.parse(JSON.stringify(res));
    })
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      userUpdate(this.form).then((res) => {
        this.$message.success(res.msg);
        Cookies.get("userInfo", this.form);
        this.$store.commit("SET_USERINFO", this.form);
        this.$store.commit("SET_NAME", this.form.username);
        this.$store.commit("SET_AVATAR", this.form.avatar);
        this.userInfo = JSON.parse(JSON.stringify(this.form));
      });
    },
    handleAvatarSuccess(res, file) {
      // console.log(res.file,'oooooo')
      this.form.avatar = `http://124.220.76.151:8000${res.data.uri}`
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt3M = file.size / 1024 / 1024 < 3;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isJPG && isLt3M;
    },
    handleClick(tab, event) {
      if (tab.name == "second") {
        this.queryOrder();
      }
    },
    queryOrder() {
      getOrderList({ size:8,current: this.current,input:{customerId: this.userInfo.id} }).then((res) => {
        this.tableData = res.data.records || [];
        this.total = Number(res.data.total)
      });
    },
    currentChange(val){
      this.current = val
      this.queryOrder()
    },
    async loginOut() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
    }
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px solid #8c939d;
}
.mine_box {
  width: 80vw;
  margin: 15px auto;
  display: flex;
  .msg {
    text-align: center;
    margin-right: 15px;
    img {
      width: 150px;
      height: 150px;
      margin-bottom: 15px;
    }
  }
  .form {
    flex: 1;
    background-color: white;
    padding: 15px;
    box-sizing: border-box;
  }
  .shopTable {
    width: 80vw;
    margin: 15px auto;
    .table_img {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
      p {
        // width: 15vw;
        width: calc(100% - 80px);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; // 从上到下垂直排列子元素
        -webkit-line-clamp: 2; // 显示两行内容
      }
    }
  }
}
</style>
